import { NavLink,Outlet } from "react-router-dom"
import styled from "styled-components"
const DemoDiv = styled.div`
    display: flex;
    font-size: 12px;
    .menu a{
        display: block;
        color:#000;
        text-decoration: none;
        &.active{
            color: red;
        }
    }
`
function A() {
    return <DemoDiv>
        <div className="menu">
            <NavLink to="/a/a1">A1</NavLink>
            <NavLink to="/a/a2">A2</NavLink>
            <NavLink to="/a/a3">A3</NavLink>
        </div>
        <div className="content">
            {/* 配置二级路由的匹配规则 */}
            {/* Outlet: 路由容器，用来渲染二级(多级)路由匹配的内容 */}
            <Outlet/>
        </div>
    </DemoDiv>
}
export default A